<template>
  <el-form ref="formRef" :model="formData" label-position="left" @submit.native.prevent>
    <div class="content">
      <el-collapse>
        <el-collapse-item
          v-for="(item, index) in formData.priorityList"
        >
          <template slot="title">
            <div class="flex-left">
              <span style="margin-right: 10px">设定{{ item.conditionsSort }}</span>
              <el-select v-model="item.conditionsType" placeholder="请选择">
                <el-option
                  v-for="(i, indx) in dictList.noticeIdList"
                  :label="i.label"
                  :value="i.value"
                />
              </el-select>
            </div>

            <i class="el-icon-close" @click.stop="handleDelPriority(index)" />
          </template>
          <hk-table
            :table-data="item.conditions"
            :table-columns="tableList"
            :operate="true"
            :show-index="true"
            :show-pag="false"
            :is-need-index="true"
          >
            <!--  操作按钮 -->
            <template #operate="{ row }">
              <i class="el-icon-circle-close" @click="handleDel(row, index)" />
              <i class="el-icon-circle-plus" @click="handleAdd(index)" />
            </template>
            <!--  工单字段 -->
            <template #variable="{ row }">
              <el-cascader
                v-model="row.row.variable"
                :options="dictList.variableList"
                :props="{
                  label:'name',
                  value:'model',
                  type:'type'
                }"
                @change="handleChange($event,row)"
              />
            </template>
            <template #conditionOpt="{ row }">
              <el-select v-model="row.row.conditionOpt" placeholder="请选择">
                <el-option
                  v-for="(i, indx) in dictList.conditionOptList"
                  :label="i.label"
                  :value="i.value"
                />
              </el-select>
            </template>
            <!--  内容 -->
            <template #conditionOptValue="{ row }">
              <!--  时间选择器 -->
              <el-time-select
                v-if="row.row.contentType=='time'"
                v-model="row.row.conditionOptValue"
                style="width:100%"
                placeholder="选择时间"
              />
              <!--  日期选择器 -->
              <el-date-picker
                v-else-if="row.row.contentType=='date'"
                v-model="row.row.conditionOptValue"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                style="width:100%"
              />
              <!--  下拉框 -->
              <el-select v-else-if="row.row.contentType=='select'" v-model="row.row.conditionOptValue" placeholder="请选择">
                <el-option
                  v-for="i in formSelectDatas.conditionOptions"
                  :label="i.value"
                  :value="item.value"
                />
              </el-select>
              <!--  单选 -->
              <el-radio-group v-else-if="row.row.contentType=='radio'" v-model="row.row.conditionOptValue">
                <el-radio v-for="i in formSelectDatas.radiosOption" :label="i.value">{{ i.label }}</el-radio>
              </el-radio-group>
              <!--  多选框 -->
              <el-checkbox-group v-else-if="row.row.contentType=='checkbox'" v-model="row.row.conditionOptValue">
                <el-checkbox v-for="i in formSelectDatas.checkBoxOption" :label="i.value" />
              </el-checkbox-group>
              <!--  计数器 -->
              <el-input-number v-else-if="row.row.contentType=='number'" v-model="row.row.conditionOptValue" />
              <!--  文本框 -->
              <el-input v-else v-model="row.row.conditionOptValue" maxlength="255" placeholder="请输入" />

            </template>
          </hk-table>
          <el-form-item
            style="margin-top: 20px; padding-left: 10px"
            label="优先级"
            label-width="140px"
            :prop="'priorityList.'+ index +'.priority'"
            :rules="{ required: true, message: '请选择', trigger: 'change' }"
          >
            <el-select v-model="item.priority" placeholder="请选择服务类型">
              <el-option
                v-for="(i, indx) in dictList.priorityLists"
                :label="i.label"
                :value="i.value"
              />
            </el-select>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
      <el-button style="padding: 20px" type="text" @click="handleAddSet">
        <i class="el-icon-plus" />添加设定
      </el-button>
    </div>

    <el-form-item
      style="margin-top: 20px"
      label="服务类型"
      label-width="140px"
      prop="priority"
      :rules="{ required: true, message: '请选择', trigger: 'change' }"
    >
      <el-select v-model="formData.priority" placeholder="请选择服务类型">
        <el-option
          v-for="(item, index) in dictList.priorityLists"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
import HkTable from '@/components/HkTable/index'
import { getFormComponent } from '../utils/setArr'
import { findPriorityById } from '@/api/basicConfig/serviceConfig'
export default {
  components: { HkTable },
  props: {},
  data() {
    return {
      formData: {
        priorityList: [
          {
            id: '0c2ea0-b0d-0f1-93b',
            serviceId: 'f40731136e82d8783422a4fa1b52971f',
            priority: null,
            conditionsType: 'every',
            conditions: [
              {
                variable: [],
                conditionOpt: '=',
                conditionOptValue: null,
                contentType: 'text'
              }
            ],
            conditionsSort: 1
          }
        ],
        priority: 3
      },
      tableList: [
        { label: '工单字段', param: 'variable', type: 'slot' },
        { label: '关系', param: 'conditionOpt', type: 'slot' },
        { label: '内容', param: 'conditionOptValue', type: 'slot' }
      ],
      dictList: {
        noticeIdList: [
          { label: '任意条件', value: 'some' },
          { label: '满足所有条件', value: 'every' }
        ],
        priorityLists: [
          { label: '极低', value: 0 },
          { label: '低', value: 1 },
          { label: '中', value: 2 },
          { label: '高', value: 3 },
          { label: '极高', value: 4 }
        ],
        variableList: [],
        conditionOptList: [
          { label: '等于', value: '=' },
          { label: '不等于', value: '!=' },
          { label: '包含', value: 'contains' },
          { label: '不包含', value: 'exclusion' }
        ]
      },
      lists: [],
      formLists: [],
      //  表单下拉框数据
      formSelectDatas: {
        selectOption: [],
        checkBoxOption: [],
        radiosOption: []
      },
      contentType: 'text'
    }
  },
  mounted() {
    this.getByIdData()
  },
  methods: {
    //  通过id查询详情
    async getByIdData() {
      const res = await findPriorityById({ id: this.$route.query.id })
      this.formData.priority = res.priority
      if (res.priorityList.length > 0) {
        const priorityList = res.priorityList.map(i => {
          return {
            id: i.id,
            serviceId: i.serviceId,
            priority: i.priority,
            conditionsType: i.conditionsType,
            conditions: JSON.parse(i.conditions),
            conditionsSort: i.conditionsSort
          }
        })
        this.formData.priorityList = priorityList
      } else {
        this.formData.priorityList = []
      }

      if (res?.form) {
        this.lists = JSON.parse(res?.form?.formTemplate).list
        this.formLists = getFormComponent(this.lists)
        console.log('formLists', this.formLists)
        this.dictList.variableList = [
          {
            name: res.form.name,
            model: res.form.id,
            children: this.formLists
          }
        ]
        this.setSelectData()
      }
    },
    // 设置下拉框的数据
    setSelectData() {
      this.formLists.forEach(i => {
        switch (i.type) {
          case 'select':
            this.formSelectDatas.selectOption = i.options.options
            break
          case 'checkbox':
            this.formSelectDatas.checkBoxOption = i.options.options
            break
          case 'radio':
            this.formSelectDatas.radiosOption = i.options.options
            break
          default:
            break
        }
      })
      console.log('this.formSelectDatas======', this.formSelectDatas)
    },
    /**
     * @param {*} params  form组件数组
     * @param {*} id    form的id
     */
    async getlistTreeData(params = [], id) {

    },
    // 触发工单字段的切换
    handleChange(val, row) {
      const contentType = this.formLists.filter(i => {
        return i.model == val[1]
      })[0].type
      row.row.contentType = contentType
      row.row.conditionOptValue = contentType == 'checkbox' ? [] : null
    },
    //  删除priorityList
    handleDelPriority(index) {
      this.formData.priorityList.splice(index, 1)
    },
    //  删除conditions
    handleDel(row, index) {
      this.formData.priorityList[index].conditions.splice(row.index, 1)
    },
    // 添加
    handleAdd(index) {
      this.formData.priorityList[index].conditions.push({
        variable: [],
        conditionOpt: null,
        conditionOptValue: null
      })
    },
    // 添加设定
    handleAddSet() {
      this.formData.priorityList.push({
        conditionsSort: this.formData.priorityList.length + 1,
        conditionsType: 'some',
        priority: 2,
        conditions: [
          {
            variable: [],
            conditionOpt: null,
            conditionOptValue: null
          }
        ]
      })
    },
    //  提交数据
    handleSubmit() {
      return new Promise((resolve) => {
        const _self = this
        this.$refs.formRef.validate((valid) => {
          if (valid) {
            const submitData = JSON.parse(JSON.stringify(this.formData))
            submitData.priorityList.forEach(i => {
              i.conditions = JSON.stringify(i.conditions)
            })
            resolve(submitData)
          } else {
            _self.$message.error('请完善表单')
            return false
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table {
  padding-left: 10px;
}
::v-deep .el-collapse {
  border: 0px !important;
}
::v-deep .el-collapse-item__header {
  background: #f8f9fe;
  padding: 0 20px;
  display: flex;
  align-items: center;
}
::v-deep .el-icon-arrow-right {
  display: none;
}
.flex-left {
  flex: 1;
}
.content {
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.el-icon-circle-close {
  font-size: 24px;
  color: rgba(0, 0, 0, 0.4);
  margin-right: 10px;
}
.el-icon-circle-plus {
  font-size: 24px;
  color: #4b6eef;
  margin-right: 10px;
}
</style>
